<template>
    <div class="container">

        <div class="body_wrap">


            <el-card shadow="hover" ref="content_card">

                <!-- 搜索+功能按钮 -->
                <el-form ref="search" :inline="true" :model="queryParams" size="medium" label-width="120px">
                    <el-card class="table_tool_bar_wrap mb10" shadow="never">
                        <div class="base_wrap">
                            <div class="left">
                                <el-form-item label="">
                                    <DeptCascader
                                        ref="cascader_dept"
                                        :cascaderDeptVal.sync="queryParams.deptId"
                                        :checkStrictly="true"
                                        @clear="queryParams.deptId=null">
                                    </DeptCascader>
                                </el-form-item>

                                <el-form-item label="" prop="keyword">
                                    <el-input placeholder="请输入..." prefix-icon="el-icon-search" v-model="queryParams.keyword" clearable/>
                                </el-form-item>
                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                                <el-button type="text" size="medium" @click="toggleSearchStatus = !toggleSearchStatus">{{toggleSearchStatus ? '收起' : '展开'}}<i class="el-icon--right" :class="toggleSearchStatus?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                            </div>

                            <div class="right">
                                <el-button @click="handleAddOrUpdateVisible()" type="primary" size="medium" icon="el-icon-plus">新增</el-button>
                                <el-button @click="handleDelete()" type="danger" size="medium" icon="el-icon-delete" :disabled="selectionRows.length == 0">删除</el-button>

                                <el-dropdown @command="handleCommand" class="ml10">
                                    <el-button type="primary" size="medium">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="export-data" divided>导出项目数据</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>

                            </div>
                        </div>

                        <div v-if="toggleSearchStatus" class="search_toggle mt10">

                            <el-row :gutter="10">
                                <el-col :sm="24" :md="8" :lg="8" :xl="6">
                                    <el-form-item label="项目名称" prop="name">
                                        <el-input placeholder="" v-model="queryParams.name" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="8" :xl="6">
                                    <el-form-item label="项目编码" prop="code">
                                        <el-input placeholder="" v-model="queryParams.code" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="8" :xl="6">
                                    <el-form-item label="开始日期">
                                        <el-date-picker
                                            v-model="startDateRange"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd"
                                            clearable
                                            style="width: 250px">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>

                                <el-col :sm="24" :md="8" :lg="8" :xl="6">
                                    <el-form-item label="结束日期">
                                        <el-date-picker
                                            v-model="endDateRange"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd"
                                            clearable
                                            style="width: 250px">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>

                                <el-col :sm="24" :md="8" :lg="8" :xl="6">
                                    <el-form-item label="项目经理" prop="projectMgrName">
                                        <el-input placeholder="" v-model="queryParams.projectMgrName" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :sm="24" :md="8" :lg="8" :xl="6">
                                    <el-form-item label="项目状态" prop="status">
                                        <el-select v-model="queryParams.status" placeholder="请选择">
                                            <el-option label="立项" value="0"></el-option>
                                            <el-option label="审批" value="1"></el-option>
                                            <el-option label="进行" value="2"></el-option>
                                            <el-option label="挂起" value="3"></el-option>
                                            <el-option label="结束" value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                            </el-row>

                        </div>
                    </el-card>
                </el-form>

                <!-- 表格 -->
                <el-table
                    class="table_wrap mt10"
                    ref="table"
                    size="medium"
                    height="650"
                    empty-text="暂无数据"
                    fit border highlight-current-row
                    :stripe="stripe"
                    v-loading="loading"
                    element-loading-text="给我一点时间"
                    :data="dataList"
                    @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                    <el-table-column label="序号" fixed type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center"/>
                    <el-table-column label="项目编码" fixed prop="code" v-if="isHideColumn('code')" align="left" width="150px" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link v-if="scope.row.status == 0" type="info" :underline="true">{{scope.row.code}}</el-link>
                            <el-link v-else-if="scope.row.status == 1" type="warning" :underline="true">{{scope.row.code}}</el-link>
                            <el-link v-else-if="scope.row.status == 2" type="primary" :underline="true">{{scope.row.code}}</el-link>
                            <el-link v-else-if="scope.row.status == 3" type="success" :underline="true">{{scope.row.code}}</el-link>
                            <el-link v-else="scope.row.status == 4" type="danger" :underline="true">{{scope.row.code}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目名称" fixed prop="name" v-if="isHideColumn('name')" align="left" show-overflow-tooltip/>
                    <el-table-column label="开始时间" prop="startDate" v-if="isHideColumn('startDate')" align="left" width="120px" show-overflow-tooltip/>
                    <el-table-column label="结束时间" prop="endDate" v-if="isHideColumn('endDate')" align="left" width="120px" show-overflow-tooltip/>
                    <el-table-column prop="days" align="center" width="120px" show-overflow-tooltip>
                        <template slot="header" slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="实际工作天数/总天数" placement="top-start">
                                <el-button type="text" class="table_header_title">工期</el-button>
                            </el-tooltip>
                        </template>
                        <template slot-scope="scope">
                            {{ scope.row.workingDays }}/{{ scope.row.allDays }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="工期" prop="days" v-if="isHideColumn('days')" align="center" width="100px" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.workingDays }}/{{ scope.row.allDays }}
                        </template>
                    </el-table-column> -->
                    <!-- <el-table-column label="工期" prop="days" v-if="isHideColumn('days')" align="center" width="150px" show-overflow-tooltip>
                        <el-table-column label="实际天数" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.workingDays }}
                            </template>
                        </el-table-column>
                        <el-table-column label="总天数" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.allDays }}
                            </template>
                        </el-table-column>
                    </el-table-column> -->
                    <el-table-column label="所属部门" prop="deptName" v-if="isHideColumn('deptName')" align="left" width="150px" show-overflow-tooltip/>
                    <el-table-column label="部门经理" prop="deptOwnerName" v-if="isHideColumn('deptOwnerName')" width="100px" align="left" show-overflow-tooltip/>
                    <el-table-column label="项目经理" prop="projectMgrName" v-if="isHideColumn('projectMgrName')" width="100px" align="left" show-overflow-tooltip/>
                    <el-table-column label="项目状态" prop="status" v-if="isHideColumn('status')" align="center" width="100px" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0" class="info">立项</span>
                            <span v-else-if="scope.row.status == 1" class="warning">审批</span>
                            <span v-else-if="scope.row.status == 2" class="primary">进行</span>
                            <span v-else-if="scope.row.status == 3" class="success">挂起</span>
                            <span v-else-if="scope.row.status == 4" class="danger">结束</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" prop="cname" v-if="isHideColumn('cname')" align="left" width="100px" show-overflow-tooltip/>
                    <el-table-column label="更新人" prop="uname" v-if="isHideColumn('uname')" align="left" width="100px" show-overflow-tooltip/>
                    <el-table-column label="创建时间" prop="ctime" v-if="isHideColumn('ctime')" align="left" width="160px" show-overflow-tooltip/>
                    <el-table-column label="更新时间" prop="utime" v-if="isHideColumn('utime')" align="left" width="160px" show-overflow-tooltip/>

                    <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="200px" align="left" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleAddOrUpdateVisible(scope.row.id, scope.row.name)" type="text" size="small">编辑</el-button>
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="handleDrawerVisible(scope.row.id)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <TablePagination
                    :total.sync="queryParams.total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"/>
            </el-card>

            <!-- 弹窗, 新增 / 修改 -->
            <AddOrUpdate ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate>

            <!-- 右侧抽屉,详情信息 -->
            <el-drawer
                ref="drawer"
                class="drawer_wrap"
                size="1000px"
                :visible.sync="drawerVisible"
                :with-header="false"
                :modal="true"
                direction="rtl"
                :before-close="handleCloseDrawerDetail">
                <div class="header_title">
                    <div class="title"><i class="el-icon-document"></i> 详情</div>
                    <div class="close el-icon-close" @click="$refs.drawer.closeDrawer()"></div>
                </div>

                <div class="header_body">
                    <el-form :model="detail" :inline="false" label-width="120">
                        <table class="detail_wrap">
                            <tbody>
                                <tr>
                                    <td class="title">项目名称</td>
                                    <td class="info">{{detail.name}}</td>
                                    <td class="title">项目编码</td>
                                    <td class="info">{{detail.code}}</td>
                                </tr>
                                <tr>
                                    <td class="title">开始时间</td>
                                    <td class="info">{{detail.startDate}}</td>
                                    <td class="title">结束时间</td>
                                    <td class="info">{{detail.endDate}}</td>
                                </tr>
                                <tr>
                                    <td class="title">部门名称</td>
                                    <td class="info">{{detail.deptName}}</td>
                                    <td class="title">部门经理</td>
                                    <td class="info">{{detail.deptOwnerName}}</td>
                                </tr>
                                <tr>
                                    <td class="title">项目经理</td>
                                    <td class="info">{{detail.projectMgrName}}</td>
                                    <td class="title">项目状态</td>
                                    <td class="info">
                                        <span v-if="detail.status == 0" class="info">立项</span>
                                        <span v-else-if="detail.status == 1" class="warning">审批</span>
                                        <span v-else-if="detail.status == 2" class="primary">进行</span>
                                        <span v-else-if="detail.status == 3" class="success">挂起</span>
                                        <span v-else-if="detail.status == 4" class="danger">结束</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="title">创建人</td>
                                    <td class="info">{{detail.cname}}</td>
                                    <td class="title">更新人</td>
                                    <td class="info">{{detail.uname}}</td>
                                </tr>
                                <tr>
                                    <td class="title">创建时间</td>
                                    <td class="info">{{detail.ctime}}</td>
                                    <td class="title">更新时间</td>
                                    <td class="info">{{detail.utime}}</td>
                                </tr>
                                <tr>
                                    <td class="title">项目描述</td>
                                    <td class="info" colspan="3" v-html="detail.description"></td>
                                </tr>
                                <tr>
                                    <td class="title">项目备注</td>
                                    <td class="info" colspan="3" v-html="detail.remarks"></td>
                                </tr>
                            </tbody>
                        </table>
                    </el-form>
                </div>
            </el-drawer>

        </div>
    </div>
</template>

<script>
    import TableMixin from '@/mixin/TableMixin'
    import TableTools from '@/views/components/table/table-tools'
    import TablePagination from '@/views/components/table/table-pagination'
    import AddOrUpdate from './add-or-update-dialog'
    import DeptCascader from '@/views/hr/dept/components/show-dept-cascader'

    export default {
        mixins: [TableMixin],
        components: {
            TableTools,
            TablePagination,
            AddOrUpdate,
            DeptCascader
        },

        data() {
            return {
                dataList: [],

                startDateRange: null,
                endDateRange: null,
                queryParams: {
                    sortColumns: 'status',
                    sortType: 'ASC',
                    startDateRange: null,
                    endDateRange: null,
                    deptId: null,
                    deptName: null,
                    deptOwnerId: null,
                    deptOwnerName: null,
                    projectMgrId: null,
                    projectMgrName: null,
                    name: null,
                    code: null,
                    startDate: null,
                    endDate: null,
                    status: null,
                    remarks: null,
                    description: null,
                    cname: null,
                    uname: null,
                    ctime: null,
                    utime: null
                },
                detail: {
                    id: null,
                    deptId: null,
                    deptName: null,
                    deptOwnerId: null,
                    deptOwnerName: null,
                    projectMgrId: null,
                    projectMgrName: null,
                    name: null,
                    code: null,
                    startDate: null,
                    endDate: null,
                    status: null,
                    remarks: null,
                    description: null,
                    cname: null,
                    uname: null,
                    ctime: null,
                    utime: null
                }
            }
        },

        created() {
        },

        mounted() {
            this.$nextTick(() => {
                this.getDataList()
            })
        },

        methods: {

            /**
             * 侧边栏抽屉打开
             */
            handleDrawerVisible(id) {
                this.getInfo(id)
                this.drawerVisible = true
            },

            /**
             * 新增或编辑
             */
            handleAddOrUpdateVisible(id, projectName) {
                // 表单窗口
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, projectName)
                })
            },

            /**
             * 删除
             */
            async handleDelete(row) {
                let ids = []
                if (row) {
                    ids.push(row.id)
                }
                if (this.selectionRows) {
                    this.selectionRows.filter((item, index) => {
                        ids.push(item.id)
                    })
                }
                if (ids.length <= 0) {
                    this.$notify({title: '提示', message: '请选择需要删除的记录！', type: 'info'});
                } else {
                    const confirm = await this.$confirm('确定要删除？', '提示', {type: 'warning'}).catch(() => {
                    })
                    if (confirm) {
                        const res = await this.$http({
                            url: '/pm/project_center/delete',
                            method: 'POST',
                            data: ids
                        })
                        if (this.ResultMessage(res)) {
                            this.getDataList()
                        }
                    }
                }
            },

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/pm/project_center/info/' + id,
                        method: 'GET'
                    })
                    this.detail = Object.assign({}, res.data)
                }
            },

            /**
             * 获取表格数据
             */
            async getDataList() {
                if(this.startDateRange && this.startDateRange.length > 0) {
                    this.queryParams.startDateRange = this.startDateRange.join(',')
                } else {
                    this.queryParams.startDateRange = null
                }
                if(this.endDateRange && this.endDateRange.length > 0) {
                    this.queryParams.endDateRange = this.endDateRange.join(',')
                } else {
                    this.queryParams.endDateRange = null
                }

                this.loading = true
                const res = await this.$http({
                    url: '/pm/project_center/page',
                    method: 'GET',
                    params: this.queryParams
                })
                if (this.ResultMessage(res, false)) {
                    this.dataList = res.data.records || []
                    this.queryParams.total = res.data.total
                }
                this.loading = false
            },

            /**
             * 更多
             */
            handleCommand(command) {
                if (command === "export-data") {
                    this.handleExport()
                }
            },

            /**
             * 搜索
             */
            handleSearch() {
                this.getDataList()
            },

            /**
             * 重新加载数据表格
             */
            handleReload() {
                this.getDataList()
            },

            /**
             * 重置搜索表单
             */
            handleReset() {
                this.handleResetPage()
                this.$refs.search.resetFields()

                this.queryParams.deptId = null
                this.$refs.cascader_dept.clearVal()

                this.startDateRange = null
                this.queryParams.startDateRange = null

                this.endDateRange = null
                this.queryParams.endDateRange = null

                this.getDataList()
            },

            /**
             * 下载导出数据
             */
            async handleExport() {
                const notify = this.$notify({ title: '提示', message: '正在下载，请稍等。', type: 'success', duration: 0 });
                const data = await this.$http({
                    url: '/pm/project_center/export',
                    method: 'POST',
                    responseType: 'blob',
                    data: {},
                }).catch(err => {
                    setTimeout(() => {
                        notify.close()
                        this.$notify({title: '错误', message: err, type: 'error'});
                    }, 1000)
                })

                if (!data) { return }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', data.filename);

                document.body.appendChild(link);
                link.click()
                setTimeout(() => { notify.close() }, 1000)
            },

        }

    }
</script>

<style lang="scss">
.table_wrap{
    .table_header_title{
        color: #000;
        font-weight: 900;
    }

}
</style>
<style lang="scss" scoped>

</style>
